<template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNo"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="search.orderNo" placeholder="请输入订单号"></el-input>
                </el-col>
                <el-col :span="12"
                ><div>
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                    <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                </div>
                </el-col></el-form
            >
            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="#" sortable> </el-table-column>
                <el-table-column prop="orderNo" label="订单号"> </el-table-column>
                <el-table-column prop="clientName" label="客户"> </el-table-column>
                <el-table-column prop="cartName" label="车名称"> </el-table-column>
                <el-table-column prop="startTime" label="开始时间"> </el-table-column>
                <el-table-column prop="endTime" label="结束时间"> </el-table-column>
                <el-table-column prop="shopName" label="出租门店"> </el-table-column>
                <el-table-column prop="returnName" label="归还门店"> </el-table-column>
                <el-table-column prop="totalPrice" label="总金额"> </el-table-column>
                <el-table-column prop="preparidAmount" label="预付金额"> </el-table-column>
                <el-table-column prop="state" label="状态" :formatter="getStatusName"></el-table-column>
                <el-table-column prop="isGetCarAtHome" label="上门送车"> </el-table-column>
                <el-table-column prop="getCarLocation" label="上门地址"> </el-table-column>
                <el-table-column prop="isReturnCarAtHome" label="上门还车"> </el-table-column>
                <el-table-column prop="returnCarLocation" label="上门地址"> </el-table-column>
                <el-table-column prop="addtime" label="订单时间"> </el-table-column>
                <el-table-column label="操作" width="180px" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="small" @click="updateInfo(scope.$index, scope.row)" icon="el-icon-edit" type="success"
                        >编辑</el-button
                        >
                        <el-button size="small" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="danger"
                        >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNo"
                    :page-sizes="[1, 5, 10, 20, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
            >
            </el-pagination>
            <!--修改 维修 Form -->
            <el-dialog title="修改订单" :visible.sync="editMaintainState">
                <el-form :model="formInfo">

                    <el-form-item label="出租门店" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.brrowShop" placeholder="请选择">
                            <el-option
                                    v-for="item in optionsMaintain"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">

                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="归还门店" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.returnShop" placeholder="请选择">
                            <el-option
                                    v-for="item in optionsMaintain"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="总金额" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.totalPrice" placeholder="总金额" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="预付金额" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.preparidAmount" placeholder="预付金额" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上门送车" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.isGetCarAtHome" placeholder="上门送车" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上门地址" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.getCarLocation" placeholder="上门地址" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上门还车" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.isReturnCarAtHome" placeholder="上门还车" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上门地址" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.returnCarLocation" placeholder="上门地址" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editMaintainState = false">取 消</el-button>
                    <el-button type="primary" @click="saveInfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
    import Vue from 'vue';
    import axios from 'axios';
    import VueAxios from 'vue-axios';
    Vue.use(VueAxios, axios);

    export default {
        data() {
            return {
                tableData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                page: {},
                formInfo:{},
                editMaintainState:false,
                form: { status: '0' },
                search: { pageNo: 1, pageSize: 5 },
                formLabelWidth: '80px',
                dialogTableVisible: false,
                optionsMaintain: []
            };
        },
        created: function () {
            this.load();
            this.loadMaintain();
            this.shop();
        },
        methods: {
            //商店的信息
            shop(){
                this.$http.get("/car/shop/selectShopAll").then((res)=>{
                    this.optionsMaintain=res.data.data;
                })
            },
            //初始化数据
            load() {
                //页面初始化时，加载的方法
                this.$http.post('/car/order/queryAllByParam', this.search)
                    .then((response) => {
                        console.log("===================================")
                        console.log(response);
                        this.tableData = response.data.data.list;
                        this.page = response.data.data;
                        this.total = response.data.data.total;
                    });
            },
            getStatusName(row, column, cellValue) {
                if (cellValue==1){
                    return "输入中";
                }
                if (cellValue==1){
                    return "提交中";
                }
                if (cellValue==2){
                    return "预约中";
                }
                if (cellValue==3){
                    return "使用中";
                }
                if (cellValue==4){
                    return "已交还";
                }
                if (cellValue==5){
                    return "已取消";
                }
                return "未知状态";
                // return cellValue == 1 ? '是' : '否';
            },
            loadMaintain() {
                var _this = this;
                this.$http.get('/car/order/queryAll').then((response) => {
                    _this.optionsMaintain = response.data.data;
                });
            },
            updateInfo: function (index, row) {
                this.formInfo = row;
                this.editMaintainState = true;
            },
            saveInfo: function () {
                var _this = this;
                if (_this.formInfo.id != null && _this.formInfo.id != '' && _this.formInfo.id != undefined) {
                    this.$http.put('/car/order/update', _this.formInfo).then(function (response) {
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        //正确请求时，回调函数
                        console.log(response);
                        _this.load();
                        _this.editMaintainState = false;
                    })
                        .catch(function (error) {
                            _this.$message.error('你错了。。。');
                            _this.editMaintainState = false;
                            _this.load();
                            //失败处理
                            console.log(error);
                        });
                } else {
                    this.$http.post('/car/order/insert', _this.formInfo).then(function (response) {
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });
                        //正确请求时，回调函数
                        _this.load();
                        _this.editMaintainState = false;
                    })
                        .catch(function (error) {
                            _this.$message.error('你错了。。。');
                            //失败处理
                            console.log(error);
                        });
                }
            },

            //每页显示数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.search.pageSize = val;
                this.load();
            },
            //第几页发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.search.pageNo = val;
                this.load();
            },
            //查询
            searchBtn() {
                console.log(`当前页`);
                this.load();
            },
            emptyBtn() {
                this.search = {};
                this.search.pageNo = 1;
                this.search.pageSize = 5;
                this.load();
            },
            deleteInfo: function (index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        var _this = this;
                        this.$http.delete('/car/order/deleteById?id=' + row.id).then(function (response) {
                            console.log(response);
                            if (response.status == 200) {
                                //重新加载数据
                                _this.load();
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        })
                            .catch(function (error) {
                                console.log(error);
                                _this.$message.error('你错了。。。');
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            }
        }
    };
</script>
<style>
</style>